<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1-案例:菜单点击切换背景色</title>
	<style type="text/css">
		button{
			width:100px;
			height:35px;
			border:none;
			cursor:pointer;
		}
		.cur{
			background:red;
			color:#fff;
			outline: none;
			border:none;
			border-radius:3px;
			
		}
	</style>
</head>

<body>
    <button>HTML</button>
    <button>JAVA</button>
    <button>HTML5</button>
    <button>CSS3</button>
    <button>Vue</button>
	
	<script type="text/javascript">
		/**
		 * 5个button按钮集合，伪数组
		   点击事件onclick
		   改变样式属性值 obj.style.color='red';
		   设置类  obj.className = 'cur'
		 */
		var btns = document.querySelectorAll('button');
		console.log(btns);//NodeList节点的集合 length=5
		//0-4
		/* btns[1].onclick = function(){
			alert(1);
		} */
		//所以我们需要根据它的返回，进行遍历
		for(var i=0;i<btns.length;i++){
			console.log(i);
			//分别点击
			btns[i].onclick = function(){
				//alert(this.innerHTML)
				//先把所以的btns节点元素都设置为'#e9e9ed'
				for(var i=0;i<btns.length;i++){
					//btns[i].style.background = '#e9e9ed';
					btns[i].className = '';
				}
				//给当前点击的元素对象添加背景颜色
				//this.style.background = 'red';
				this.className = 'cur';
			}
		}
		
	</script>
</body>

</html>